<template>
	<view class="history_list">
		<view class="list">
			<text class="list-title">{{theory_data.title}}</text>
			<template v-for="(item, i) in theory_data.userPlans">
				<view class="list-opc" @click="clickLink(theory_data.type, item)">
					<text>{{item.opcName}}理论记录</text>
					<view class="iconfont icon-ai-arrow-right"></view>
				</view>
			</template>
		</view>
		<view class="list" v-if="sub_data.userPlans.length != 0">
			<text class="list-title">{{sub_data.title}}</text>
			<template v-for="(item, i) in sub_data.userPlans">
				<view class="list-opc"
					@click="clickLink(sub_data.type, item)">
					<text>{{item.opcName}}科目三记录</text>
					<view class="iconfont icon-ai-arrow-right"></view>
				</view>
			</template>
		</view>
		<view class="list" v-if="ishan">
			<text class="list-title">实操科目一模拟考试记录</text>
				<view class="list-opc"  @click="clickLink(3, item)">
					<text>熔化焊接与热切割作业科目一记录</text>
					<view class="iconfont icon-ai-arrow-right"></view>
				</view>
		</view>
		<m-tabbar v-if="!tabbar_show" name="new" ref="tabbar1" native :safeBottom="false" current="2"></m-tabbar>
		<m-tabbar v-else name="new" fixed fill ref="tabbar2" :tabbar="tabbar" :safeBottom="false"
			current="2"></m-tabbar>
	</view>
</template>

<script>
	import {
		getTestPaperList,
		getSubPaperList,
		getSub1PaperList
	} from '@/api/index.js'
	import {
		formatDate,
		timeDifference
	} from '@/utils/index'
	export default {
		data() {
			return {
				pageNum: 1,
				pageSize: 1,
				list: [],
				formatDate,
				timeDifference,
				type: 1,
				userinfo: {},
				tabbar: {},
				tabbar: true,
				ishan: true,
				theory_data: {
					title: '理论模拟考试记录',
					type: 1,
					userPlans: []
				},
				sub_data: {
					title: '实操科目三模拟考试记录',
					type: 2,
					userPlans: [
					]
				},
				tabbar: {},
				tabbar_show: false,
			};
		},
		onLoad() {
			this.userinfo = uni.getStorageSync('userinfo')
			
			this.sub_data.userPlans = this.userinfo.userPlans
				.filter(e => e.repart == 0 && e.userSub == 1) // 先过滤出满足条件的元素  
				.map(e => ({  
					"opcName": e.opcName,
					"opc": e.opc,
					"name": "科目三"
				}));
			this.ishan = this.userinfo.userPlans.find(e => e.opc == '030201' && e.repart != 1)
			this.theory_data.userPlans = this.userinfo.userPlans
		},
		onShow() {
			this.tabbar = uni.getStorageSync('tabbar')
			this.tabbar_show = uni.getStorageSync('tabbar_show')
			// if (!this.tabbar_show) {
			// 	this.data = [this.data[0]]
			// }
		},
		methods: {
			clickLink(val, item) {
				let params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
				}
				uni.showLoading()
				if (val == 1) {
					params.otype = item.opc
					this.handleResponse([{}], val, this.type, item.opc)
				}
				if (val == 2) {
					params.opc = item.opc
					getSubPaperList(params).then(res => this.handleResponse(res.data.list, val, this.type, item.opc));
				}
				if (val == 3) {
					// params.otype = item.opc
					params.userId = this.userinfo.id
					getSub1PaperList(params).then(res => this.handleResponse(res.data.list, val, this.type, '030201'));
				}
			},
			handleResponse(res, val, type, opc) {
				uni.hideLoading();
				if (res?.length === 0) {
					uni.showModal({
						title: '暂无模拟记录',
						content: '你还没模拟考试，暂无模拟记录',
						cancelText: '取消',
						confirmText: '去模拟考试',
						success: function(modalRes) {
							if (modalRes.confirm) {
								uni.switchTab({
									url: val == 1 ? '/pages/index/index' : '/pages/subject/subject'
								});
							} else if (modalRes.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else {
					uni.navigateTo({
						url: `/pages/history/history_list?type=${val}&opc=${opc}`
					});
				}
			},
			// loadData() {
			// 	let params = {
			// 		pageNum: this.pageNum,
			// 		pageSize: this.pageSize,
			// 	}
			// 	getTestPaperList(params).then(res => {
			// 		this.list = res.data.list
			// 	})
			// },
			// 错题练习
			exercises(item) {
				uni.setStorageSync('errJson', item.errorQuestionIds)
				uni.navigateTo({
					url: `/pages/exercises/exercises?id=${item.id}&type=1&otype=${item.otype}`
				})
			},
			// 试卷查看
			paperLook(item) {
				// console.log(item);
				uni.navigateTo({
					url: `/pages/exercises/exercises?id=${item.id}&type=2&otype=${item.otype}`
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	page {
		box-shadow: 0px -10rpx 16rpx -6rpx #2069c7;
		z-index: 2;
		background: linear-gradient(180deg, #4d8dec, rgba(104, 157, 234, 0));
	}

	.history_list {
		overflow: hidden;
		padding-bottom: 100rpx;
		.list {
			// height: 135rpx;
			border-radius: 10rpx;
			overflow: hidden;
			// display: flex;
			margin: 32rpx;
			border: 2rpx solid #F67914FF;
			box-shadow: 0px 6rpxx 10rpx -1rpx rgb(44 66 84 / 21%);

			.list-title {
				color: #000;
				display: block;
				padding: 20rpx 30rpx 20rpx 45rpx;
				position: relative;
				font-size: 46rpx;
				background: #FFFFFF;

				:before {
					content: '';
					width: 5rpx;
					height: 50%;
					border-radius: 5rpx;
					background: #F67914FF;
					position: absolute;
					left: 30rpx;
					top: 50%;
					/* 将元素的顶部移动到父元素的中心 */
					// left: 50%;/
					/* 将元素的左侧移动到父元素的中心 */
					transform: translate(-50%, -50%);
				}

				:after {
					content: '';
					width: 100%;
					height: 50%;
					border-radius: 5rpx;
					border-bottom: 0.0625rem dashed #858687;
					position: absolute;
					left: 0;
					bottom: 0;
				}
			}

			.list-opc {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx;
				background: #FFFFFF;
				margin-bottom: 5rpx;
				font-size: 26rpx;

				&:last-child {
					margin-bottom: 0;
				}
			}

			text {
				font-weight: 500;
				// font-size: 36rpx;
				color: #666;
				line-height: 48rpx;
			}
		}
	}
</style>